<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>Vue-echarts</title>
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script include="vue,echarts" exclude="plugin,cesium" src="./static/libs/include-cesium-local.js"></script>
    <style type="text/css">
        body {
            margin: 0px !important;
        }

        #app {
            margin: 0 0;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }

        .map {
            position: absolute; /* 只能是绝对布局 */
            top: 0;
            bottom: 0;
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>
<div id="app">
    <mapgis-web-scene
            :animation="false"
            :timeline="false"
            :camera-view="cameraView"
            v-on:load="handleLoad"
            lib-path="./static/libs/cdn/cesium/Cesium.js"
            plugin-path="./static/libs/cdn/zondyclient/webclient-cesium-plugin.min.js"
    >
        <mapgis-3d-arcgis-tile-layer
                :base-url="baseUrl"
                :layer-style="layerStyle">
        </mapgis-3d-arcgis-tile-layer>
        <mapgis-3d-echarts-layer :options="option"></mapgis-3d-echarts-layer>
    </mapgis-web-scene>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                busLines: {},
                option: {},
                baseUrl: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
                layerStyle: {
                    visible: true,
                    opacity: 1,
                    zIndex: 2
                },
                cameraView: {
                    destination: {
                        x: -2409221.7854387695,
                        y: 4705113.697479787,
                        z: 4500333.6696071755
                    },
                    orientation: {
                        heading: 3.2694614177406143,
                        pitch: -1.4832321184766042,
                        roll: 3.1369303868636838
                    },
                }
            };

        },
        mounted() {
            this.initData();
        },
        methods: {
            handleLoad(e) {
                console.log('地图加初始化完毕！', e);
            },
            initData() {
                var vm = this;
                $.get('https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/lines-bus.json', function (res) {
                    var hStep = 300 / (res.length - 1);
                    vm.busLines = [].concat.apply([], res.map(function (busLine, idx) {
                        var prevPt;
                        var points = [];
                        for (var i = 0; i < busLine.length; i += 2) {
                            var pt = [busLine[i], busLine[i + 1]];
                            if (i > 0) {
                                pt = [
                                    prevPt[0] + pt[0],
                                    prevPt[1] + pt[1]
                                ];
                            }
                            prevPt = pt;

                            points.push([pt[0] / 1e4, pt[1] / 1e4]);
                        }
                        return {
                            coords: points,
                            lineStyle: {
                                normal: {
                                    color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))
                                }
                            }
                        };
                    }))
                    vm.initOptions(vm.busLines);
                })

            },
            initOptions(busLines) {
                var echartsOptions = {
                    cesium: {
                        roam: true
                    },
                    series: [{
                        type: 'lines',
                        coordinateSystem: 'cesium',
                        polyline: true,
                        data: busLines,
                        silent: true,
                        lineStyle: {
                            // color: '#c23531',
                            // color: 'rgb(200, 35, 45)',
                            opacity: 0.2,
                            width: 1
                        },
                        progressiveThreshold: 500,
                        progressive: 200
                    }, {
                        type: 'lines',
                        coordinateSystem: 'cesium',
                        polyline: true,
                        data: busLines,
                        lineStyle: {
                            width: 0
                        },
                        effect: {
                            constantSpeed: 20,
                            show: true,
                            trailLength: 0.1,
                            symbolSize: 1.5
                        },
                        zlevel: 1
                    }]
                };
                this.option = echartsOptions;
            }
        }
    });
</script>
</body>
</html>
